import 'package:xbaistack/widget/icon_list.dart';
import 'package:flutter/material.dart';

class IconPage extends StatefulWidget {
  const IconPage({super.key});

  @override
  State<IconPage> createState() => _IconPageState();
}

class _IconPageState extends State<IconPage>
    with TickerProviderStateMixin<IconPage> {
  late final List<AnimationController> _controllers;

  @override
  void initState() {
    super.initState();
    _controllers = List.generate(icons.length, (index) {
      return AnimationController(
        vsync: this, // 使用 GPU/CPU 同步渲染信号
        duration: const Duration(milliseconds: 200), // 动画时长
        animationBehavior: AnimationBehavior.preserve,
      );
    });
  }

  @override
  void dispose() {
    super.dispose();
    for (var controller in _controllers) {
      controller.dispose(); // 记得要销毁
    }
  }

  // 切换动画的不同形态
  void _startAnimation(int index) {
    AnimationController controller = _controllers[index];
    if (!controller.isAnimating) {
      if (controller.isCompleted) {
        controller.reverse(); // 反向变化回去
      } else {
        controller.reset();
        controller.forward(); // 正向变化
      }
    }
  }

  // SDK 内置的所有动态图标
  // 也可以定制自己的 AnimatedIcon 不过很复杂
  final icons = <AnimatedIconData>[
    AnimatedIcons.add_event,
    AnimatedIcons.event_add,
    AnimatedIcons.menu_arrow,
    AnimatedIcons.arrow_menu,
    AnimatedIcons.pause_play,
    AnimatedIcons.play_pause,
    AnimatedIcons.menu_close,
    AnimatedIcons.close_menu,
    AnimatedIcons.ellipsis_search,
    AnimatedIcons.search_ellipsis,
    AnimatedIcons.list_view,
    AnimatedIcons.view_list,
    AnimatedIcons.home_menu,
    AnimatedIcons.menu_home,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('图标')),
      body: Center(
        child: Column(
          children: [
            Icon(
              IconFonts.heart, // 你定义的字体码
              size: 40, // 图标大小
              color: Colors.blueAccent, // 图标颜色

              applyTextScaling: true, // 是否随系统字体缩放一起缩放
            ),
            Icon(
              IconFonts.heart,
              color: Colors.black,
              size: 50,
              shadows: const [
                BoxShadow(
                  // 第一层为最底下的红色，blurRadius 为 0 表示不使用模糊效果，直接执行偏移
                  color: Colors.red,
                  blurRadius: 0,
                  offset: Offset(2, 1),
                ),
                BoxShadow(
                  // 这是第二层的青色，偏移量和底层是相反方向的
                  color: Colors.cyan,
                  blurRadius: 0,
                  offset: Offset(-2, -1),
                ),
              ],
            ),
            Container(
              color: const Color(0xFFFAFAFA),
              child: GridView.builder(
                shrinkWrap: true,
                itemCount: icons.length,
                padding: const EdgeInsets.all(10),
                physics: const NeverScrollableScrollPhysics(),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 4,
                  mainAxisSpacing: 10,
                  crossAxisSpacing: 10,
                  childAspectRatio: 1 / 1,
                ),
                itemBuilder: (context, index) {
                  return GestureDetector(
                    onTap: () => _startAnimation(index),
                    child: Container(
                      decoration: BoxDecoration(
                        color: const Color(0xFFF1F1F1),
                        borderRadius: BorderRadius.circular(6),
                      ),
                      alignment: Alignment.center,
                      child: AnimatedIcon(
                        icon: icons[index],
                        size: 40,
                        progress: _controllers[index],
                        color: Colors.black,
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
